<template>
    <div>
        <div class="main">
        <div class="box">
            <h1>学科</h1>
            <h1>分数</h1>
        </div>
       <div v-for="(item,index) in stu" :key="index">
            <p>{{ item.subject }} <input type="text" v-model.number="item.grade"></p>
       </div> 
       <div>
            <p>
                <span>总分:</span>
                <span>{{ tatle }}</span>
            </p>
            <p>
                <span>平均分：</span>
                <span>{{ AV }}</span>
            </p>
       </div>
       </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            stu: [
                {
                    subject: "语文",
                    grade: 120,
                },
                {
                    subject: "数学",
                    grade: 50,
                },
                {
                    subject: "英语",
                    grade: 120,
                }
            ]
        }
    },
    methods: {

    },
    computed:{
        tatle(){
            return this.stu[0].grade + this.stu[1].grade + this.stu[2].grade
        },
        AV(){
            return (this.tatle / 3).toFixed(2)
        }
    }
}   
</script>
<style>
.main{
    width: 400px;
}
    .box{
        width:400px ;
        display: flex;
        justify-content: space-around
    }
</style>